<template>
	<view>

		<u-image :src="info.cover" width="750" mode="widthFix"></u-image>

		<view class="u-padding-30">
			<view style="font-weight: bold;font-size: 32rpx;margin-bottom: 10rpx;">{{info.title}}</view>

			<view class="text" v-if="info.city">
				<view class="left">地区</view>
				<view class="right">{{info.city}}</view>
			</view>
			<view class="text" v-if="info.houseType">
				<view class="left">户型</view>
				<view class="right">{{info.houseType}}</view>
			</view>
			
			<view class="text" v-if="info.style">
				<view class="left">风格</view>
				<view class="right">{{info.style}}</view>
			</view>
			<view class="text" v-if="info.acreage">
				<view class="left">面积</view>
				<view class="right">{{info.acreage}}m</view>
			</view>
			<view class="text" v-if="info.designer">
				<view class="left">设计师</view>
				<view class="right">{{info.designer}}</view>
			</view>
		
		</view>
		
		<u-gap height="10" bg-color="#f1f1f1"></u-gap>
		
		<view class="u-margin-top-20">
			<view class="u-text-center u-font-lg u-font-weight">效果展示</view>
			<view class="u-padding-20">
				<u-parse :html="info.detail"></u-parse>
			</view>
		</view>
				
		


		<view class="bottom u-flex">
			<view class="u-flex u-flex-1 u-row-around u-text-center">
				<view class="u-flex-1 " style="position: relative;" >
					<u-icon name="share" size="40"></u-icon>
					<view style="font-size: 24rpx;">分享</view>
					<button open-type="share" class="custom-btn"></button>
				</view>
				<view  class="u-flex-1" @click="collect">
					<u-icon :name="info.collectCount?'heart-fill':'heart'" size="40" :color="info.collectCount?'#FF5D39':''"></u-icon>
					<view style="font-size: 24rpx;">收藏</view>
				</view>
			</view>
			<view class="u-flex-2 u-text-center u-flex">
				<view class="btn u-flex-1 blue" @click="goDesign">我要设计</view>
				<view class="btn u-flex-1 red" v-if="!info.vip"  @click="removeWater">去水印</view>
			</view>
		</view>
		

        <removeWater ref="chilren" @remove="remove" :goodId='info.id' v-if="info.id"></removeWater>

	</view>
</template>

<script>
	
	import removeWater from '@/components/removeWater.vue'
	export default {
		components:{
			removeWater
		},
		data() {
			return {
				info: {},
				id: ""

			}
		},
		onReady() {


		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.jiazai()
		},
		onShow() {

		},
		methods: {
			
			remove(){
				this.jiazai();
				this.$refs.chilren.show=false
			},
			removeWater(){
				if(this.info.vip){
					this.$u.toast('当前案例已经去除水印，不能重复操作')
					return
				}
				this.$refs.chilren.show=true;
			},
			goDesign(){
				uni.switchTab({
					url:'/pages/designCenter/index'
				})
			},
			jiazai() {
				this.$u.post('/index/caseDetail', {
					cases_id: this.id
				}).then(res => {
					this.info = res
				}).catch(err => {

				})
			},
			collect(){
				this.$u.api.collect({
					type:"cases",
					id:this.id
				}).then(res=>{
					if(!this.info.collectCount){
						this.$u.toast("收藏成功");
					}else{
						this.$u.toast("取消收藏");
					}
					
					this.jiazai()
				})
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100rpx;
	}
.bottom{
			position: fixed;
			bottom: 0;
			width:750rpx;
			height: 120rpx;
			border-top: 1rpx solid #F1F1F1;
			background: #FFFFFF;
			
			.btn{
				font-size: 30rpx;
				color: #fff;
				height: 120rpx;
				line-height: 120rpx;
				
				&.blue{
					background: #4066F4;
				}
				&.red{
					background: #FF5D39;
				}
			}
		}
	.text {
		display: flex;
		padding: 10rpx 0;

		.left {
			width: 200rpx;
			color: #C2C2C2
		}

		.right {
			font-weight: bold;
		}
	}
</style>
